<template>
  <div>
    资讯{{ num }}
    <keep-alive exclude="childView2">
      <component :is="com" :num.sync="num"></component>
    </keep-alive>
    <button @click="change('ChildView1Vue')">组件一</button>
    <button @click="change('ChildView2Vue')">组件二</button>
    <base-input
      label="Username:"
      v-model="username"
      required
      placeholder="Enter your username"
    ></base-input>
    <button @click="getUsername">获取子组件的数据</button>
    <hr/>

    <my-dialog>
      <template #header>
        <div>标题资讯{{ num }}</div>
      </template>
      <template #main>
        <div>内容</div>
      </template>
      <template #footer>
        <div>底部
          <button @click="num++">加法</button>
        </div>
      </template>
    </my-dialog>
  </div>
</template>

<script>
import baseInput from "../components/news/base-input.vue";
import ChildView1Vue from "../components/news/ChildView1.vue";
import ChildView2Vue from "../components/news/ChildView2.vue";
import myDialog from '../components/news/my-dialog.vue';

export default {
  data() {
    return {
      com: ChildView1Vue,
      num: 100,
      username:"",
    };
  },
  methods: {
    change(com) {
      this.com = com;
    },
    getUsername(){
      alert(this.username);
    }
  },
  components: {
    ChildView1Vue,
    ChildView2Vue,
    baseInput,
    myDialog
  },
};
</script>

<style></style>
